<template>
  <div class="h100 commonTableSty" ref="groupTableList">
    <s-table
      ref="table"
      class="h100"
      :columns="columns"
      :data="loadData"
      :row-key="(record,index)=>index"
    >
      <template
        slot-scope="text"
        v-for="column in commonColumns"
        :slot="column.scopedSlots.customRender"
      >
        <table-ellipsis :text="text || '-'" :key="column.dataIndex"></table-ellipsis>
      </template>
      <template #orderNum="text,record">
        <a @click="doAction('showOrderDetail', record)"><table-ellipsis :text="text || '-'"></table-ellipsis></a>
      </template>
      <template #VIN="text,record">
        <a @click="doAction('showVehicleDetail', record)"><table-ellipsis :text="text || '-'"></table-ellipsis></a>
      </template>
      <template #orderType="text">
        <table-ellipsis :text="orderTypeDictCodeObj[text] || '-'"></table-ellipsis>
      </template>
      <template #orderStatus="text">
        <table-ellipsis :text="serviceOrderStatusDictCodeObj[text] || '-'"></table-ellipsis>
      </template>
      <template #payStatus="text">
        <table-ellipsis :text="payStatusDictCodeObj[text] || '-'"></table-ellipsis>
      </template>
      <template #billStatus="text">
        <table-ellipsis :text="billStatusDictCodeObj[text] || '-'"></table-ellipsis>
      </template>
      <template #refundStatus="text">
        <table-ellipsis :text="orderRefundStatusDictCodeObj[text] || '-'"></table-ellipsis>
      </template>
      <template slot="createTime" slot-scope="text">
        <table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis>
      </template>
      <template slot="payTime" slot-scope="text">
        <table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis>
      </template>
      <template slot="invoicingTime" slot-scope="text">
        <table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis>
      </template>
      <template slot="refundTime" slot-scope="text">
        <table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis>
      </template>
    </s-table>
  </div>
</template>
<script>
import { orderTbColumns } from '../config/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { mapState } from 'vuex'
import orderManagementApi from '@/api/modules/system/orderManagement'
export default {
  components: {
    tableEllipsis,
    STable
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.orderManagement.queryParams
    }),
    commonColumns () {
      return this.columns.filter(item => !item.special)
    },
    // 订单类型
    orderTypeDictCodeObj () {
      return this.$store.getters.getOrderManageDictCodeObj('orderType')
    },
    // 支付状态
    payStatusDictCodeObj () {
      return this.$store.getters.getOrderManageDictCodeObj('payStatus')
    },
    // 开票状态
    billStatusDictCodeObj () {
      return this.$store.getters.getOrderManageDictCodeObj('billStatus')
    },
    serviceOrderStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('serviceOrderStatusDictCode')
    },
    // 退款状态
    orderRefundStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('orderRefundStatusDictCode')
    }
  },
  data () {
    return {
      columns: orderTbColumns
    }
  },
  watch: {
  },
  created () {
    this.getPageDictData()
  },
  mounted () {
  },
  methods: {
    loadData (parameter) {
      const params = { ...this.queryParams, ...parameter }
      return orderManagementApi.getServiceOrderList(params)
    },
    doAction (key, rowData) {
      if (this[key]) {
        this[key](rowData)
        return
      }
      this.$emit('clickbtn', { type: key, data: rowData })
    },
    refreshData (isToFirstPage = true) {
      if (!this.$refs.table) {
        return
      }
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.table.loadData(obj)
    },
    getPageDictData () {
      ['getServiceOrderStatusDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.mr12 {
  margin-right: 12px;
}
.relatedEcuNum {
  font-weight: bold;
  margin-left: 5px;
}
</style>
